;(function($){
    "use strict";

    $.fn.nav = function(ops){
        ops = ops || {};
        // console.log(this);
        // nav功能
        // console.log(ops)

        // ===========

        // 面向对象的写法
        // let cont = this;
        // class Test{
        //     constructor(){
        //         console.log(ops)
        //         this.data = ops.data || [];
        //         this.type = ops.type || "click";
        //         this.index = ops.index || 0;
        //         console.log(cont)
        //     }
        // }
        // new Test;

        // ==========

        // <ul>
            // <li>
            //     <span>一级菜单</span>
            //     <ul>
            //         <li>二级菜单</li>
            //     </ul>
            // </li>
        // </ul>


        let {data=[], type="click", currentColor="pink"} = ops;

        // 准备根据二级菜单的数据，拼接二级菜单的结构字符
        function twoMenu(items){
            let str = "";
            items.forEach(val=>{
                str += `<li>${val}</li>`
            })
            return str;
        }

        // 拼接一级菜单的结构
        let oneMenu = "";
        data.forEach(val=>{
            // console.log(val.title);
            oneMenu += `<li>
                <span>${val.title}</span>
                <ul>
                    ${twoMenu(val.items)}
                </ul>
            </li>`
            // 以上字符中的`${twoMenu(val.items)}`表示需要指定数据拼接二级菜单结构字符
        })

        // 准备菜单的容器，存在菜单结构
        // 菜单容器也需要插入到页面指定区域
        // 可以从菜单容器开始入口添加导航各个元素的样式
        $("<ul class='navList'>").html(oneMenu).appendTo(this)
        .css({
            listStyle:"none",
            background:"#ccc",
            display:"flex",
            lineHeight:"40px",
            height:"40px",
            textAlign:"center"
        }).children("li").css({
            flex:1,
            borderLeft:"solid 1px black",
            borderRight:"solid 1px black"
        }).children("ul").css({
            listStyle:"none",
            background:"#aaa",
            display:"none"
        }).children("li").css({
            borderBottom:"solid 1px #fff"
        }).hover(function(){
            $(this).css({
                "background":currentColor,
                color:"#fff"
            })
        },function(){
            $(this).css({
                "background":"",
                color:"#000"
            })
        })




        type = type === "click" ? type : "mouseenter";
        // "click"
        // "mouseenter"
        this.children(".navList").children("li")[type](function(){
            $(this).css({
                background:currentColor
            }).children("span").css({
                color:"#fff"
            }).siblings("ul").stop().show().parent().siblings().css({
                background:""
            }).children("span").css({
                color:"#000"
            }).siblings("ul").stop().hide();

            event.stopPropagation();
        })

        if(type === "click"){
            // 作业：将document的点击隐藏，切换成再次点击一级菜单隐藏
            $(document).click(function(){
                $(".navList").children("li").css({
                    background:""
                }).children("span").css({
                    color:"#000"
                }).siblings("ul").stop().hide();
            })
        }else{
            this.children(".navList").children("li").mouseleave(function(){
                $(this).css({
                    background:""
                }).children("span").css({
                    color:"#000"
                }).siblings("ul").stop().hide();
            })
        }

    }
})(jQuery);